import React, { createContext, useState } from 'react';
import { Alert, Button, Dimensions, SafeAreaView, StatusBar, StyleSheet, Switch, Text, View } from 'react-native';

//Switch开关组件练习
const SwitchPage = () => {

    const [hideStatusBar, setHideStatusBar] = useState(false)

    return (
        <View style={[styles.root]}>

            {/* 顶部状态栏 */}
            <StatusBar
                hidden={false}   //隐藏状态栏
                backgroundColor={"#FF0000"}     //仅在Android设备有效
                barStyle={hideStatusBar ? 'dark-content' : "light-content"}       //状态栏字体部件颜色
            />

            <Switch
                trackColor={{ false: '#80999999', true: '#999' }}
                thumbColor={'#666666'}
                value={hideStatusBar}
                onValueChange={() => {
                    setHideStatusBar(!hideStatusBar)
                }}
            />

        </View>
    );
};

const styles = StyleSheet.create({
    root: {
        justifyContent: "center",
        alignItems: "center",
        height: Dimensions.get('window').height
    }
})

export default SwitchPage;
